<template>
	<!-- 收入明细 -->
  <view class="container">
    <!-- <view class="header">
      <view class="back-icon">⬅</view>
      <text class="title">收入明细</text>
    </view> -->
    <scroll-view class="list" scroll-y>
      <view class="list-item" v-for="(item, index) in details" :key="index">
        <view class="item-left">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-date">{{ item.date }}</text>
        </view>
        <view class="item-right">
          <text class="item-amount">+ {{ item.amount }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: [
        { name: '张明明', date: '2024.05.10', amount: 598 },
        { name: '黎莉莉', date: '2024.06.10', amount: 999 },
        { name: '张明明', date: '2024.05.10', amount: 598 },
        { name: '黎莉莉', date: '2024.06.10', amount: 999 },
        { name: '张明明', date: '2024.05.10', amount: 598 },
        { name: '黎莉莉', date: '2024.06.10', amount: 999 }
      ]
    };
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 100%;
}

/* .header {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 38rpx;
  margin-right: 20rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
} */

.list {
  flex: 1;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f4f4f4;
}

.item-left {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 34rpx;
  color: #333333;
}

.item-date {
  font-family: HelveticaNeue;
  	font-size: 28rpx;
  	color: #303132;
  margin-top: 10rpx;
}

.item-right {
  display: flex;
  align-items: center;
  font-size: 34rpx;
  color: #d4a550;
}

.item-amount {
  color: #d4a550;
}
</style>